<template>
  <!-- 选择日期 -->
  <div class="conditions">
    <span
      class="title"
      style="width: 110px;display: inline-block;margin-right: 10px;text-align: right;"
    >{{title}}</span>
    <Date-picker
      :type="type"
      :split-panels="type=='daterange'"
      :editable="false"
      :v-model="value"
      :value="value"
      @on-change="dateChange"
      @on-clear="clear"
      :placeholder="placeholder"
      style="width: 200px"
      :clearable="clearable"
    ></Date-picker>
  </div>
</template>

<script>
import util from "@/libs/util.js";

export default {
  props: {
    value: {
      type: String,
      default: util.date.getNowFormatDate("date")
    },
    type: {
      type: String,
      default: "date"
    },
    title: {
      type: String,
      default: "选择日期"
    },
    clearable:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      placeholder: util.date.getNowFormatDate(this.type)
    };
  },
  computed: {},
  watch: {},
  methods: {
    dateChange(date) {
      this.$emit("input", date);
    },
    clear() {
      this.placeholder = null;
    }
  },
  created() {},
  mounted() {
    this.$emit("input", this.placeholder);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
